/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="page">
    <div class="fixed-bar">
      <div class="item-title">
        <a class="back" href="javascript:history.back(-1)" title="返回列表">
          <i class="fa fa-arrow-circle-o-left"></i>
        </a>
        <div class="subject">
          <h3>投诉管理</h3>
          <h5>商城对商品交易投诉管理及仲裁</h5>
        </div>
      </div>
    </div>

    <div class="ncap-order-style">
      <div class="ncap-order-flow">
        <ol class="num5">
          <el-steps :active="state" align-center>
          	<el-step title="待处理" icon="el-icon-check"></el-step>
          	<el-step title="对话中" icon="el-icon-check"></el-step>
          	<el-step title="待仲裁" icon="el-icon-check"></el-step>
          	<el-step title="已完成" icon="el-icon-check"></el-step>
          </el-steps>
        </ol>
      </div>
      <div class="ncap-order-details">
        <ul class="tabs-nav">
          <li class="current">
            <a href="javascript:void(0);">订单详情</a>
          </li>
        </ul>
        <div class="tabs-panels">
          <div class="misc-info">
            <dl>
              <dt>店铺名称：</dt>
              <dd>
                <a
                  href="/index.php/Home/Store/index/store_id/2"
                  target="_blank"
                >{{complain.store_name}}</a>
              </dd>
              <dt>订单状态：</dt>
              <dd>{{order.order_status_detail}}</dd>
              <dt>订单号：</dt>
              <dd>
                <a href="/index.php/admin/Order/detail/order_id/4610">{{order.order_sn}}</a>
              </dd>
              <dt>下单时间：</dt>
              <dd>{{order.add_time_detail}}</dd>
              <dt>订单总额：</dt>
              <dd>{{order.total_amount}}</dd>
            </dl>
          </div>
          <div class="goods-info">
            <h4>投诉的商品</h4>
            <table>
              <thead>
                <tr>
                  <th colspan="2">商品名称</th>
                  <th>数量</th>
                  <th>价格</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <a style="text-decoration:none;" href target="_blank">
                      <img
                        alt
                        :src="apiHead + '/mall/goods/thumb_image?goods_id='+complain.order_goods.goods_id+'&width=50&height=50'"
                      />
                    </a>
                  </td>
                  <td>
                    <p>
                      <a
                        href="/index.php/Home/Goods/goodsInfo/id/4"
                        target="_blank"
                      >{{complain.order_goods.goods_name}}</a>
                    </p>
                  </td>
                  <td>{{complain.order_goods.goods_num}}</td>
                  <td>{{complain.order_goods.goods_price}}</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="100">
                    &nbsp;&nbsp;投诉内容
                    <div class="complain-intro">{{complain.complain_content}}</div>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
      <div class="ncap-form-default">
        <div class="title">
          <h3>投诉信息</h3>
        </div>
        <dl class="row">
          <dt class="tit">投诉状态：</dt>
          <dd class="opt">{{complain.complain_state_detail}}</dd>
        </dl>
        <dl class="row">
          <dt class="tit">投诉主题：</dt>
          <dd class="opt">{{complain.complain_subject_name}}</dd>
        </dl>
        <dl class="row">
          <dt class="tit">投诉人：</dt>
          <dd class="opt">{{complain.user_name}}</dd>
        </dl>
        <dl class="row">
          <dt class="tit">投诉证据：</dt>
          <dd class="opt">
            <span v-if="complain.complain_pic == null">暂无图片</span>
            <span v-else>
              <img :src="complain.complain_pic" width="120" height="120" />
            </span>
          </dd>
        </dl>
        <dl class="row">
          <dt class="tit">投诉时间：</dt>
          <dd class="opt">{{complain.complain_time_show}}</dd>
        </dl>
      </div>
      <div class="ncap-form-default" v-if="state > 1">
        <div class="title">
          <h3>申诉详情</h3>
        </div>
        <dl class="row">
          <dt class="tit">被投诉店铺：</dt>
          <dd class="opt">{{complain.store_name}}</dd>
        </dl>
        <dl class="row">
          <dt class="tit">申诉证据：</dt>
          <dd class="opt">
            <span v-if="complain.appeal_pic == null">暂无图片</span>
            <span v-else>
              <img :src="complain.appeal_pic" width="120" height="120" />
            </span>
          </dd>
        </dl>
        <dl class="row">
          <dt class="tit">申诉时间：</dt>
          <dd class="opt">{{complain.appeal_time_show}}</dd>
        </dl>
        <dl class="row">
          <dt class="tit">申诉内容：</dt>
          <dd class="opt">{{complain.appeal_msg}}</dd>
        </dl>
      </div>
      <div class="ncap-form-default" v-if="state > 1">
        <div class="title">
          <h3>对话详情</h3>
        </div>
        <dl class="row">
          <dt class="tit">对话记录：</dt>
          <dd class="opt">
            <div class="div_talk">
              <p v-for="talk in complainTalkList" :key="talk.talk_id" :class="talk.talk_member_type">
                <span v-if="talk.talk_state == 1">
                  {{talk.talk_time_show}}{{talk.talk_member_detail}}{{talk.talk_content}}&nbsp;&nbsp;
                  <a
                    href="#"
                    @click="talkState(talk)"
                  >屏蔽</a>
                </span>
                <span v-if="talk.talk_state == 2">
                  {{talk.talk_time_show}}{{talk.talk_member_detail}}&lt;该对话被管理员屏蔽&gt;&nbsp;&nbsp;
                  <a
                    href="#"
                    @click="talkState(talk)"
                  >屏蔽</a>
                </span>
              </p>
            </div>
          </dd>
        </dl>
		<dl class="row" v-if="state != 4">
		  <dt class="tit">发布对话：</dt>
		  <dd class="opt">
		    <textarea v-model="complainTalk.talk_content" class="w400"></textarea>
		  </dd><br>
		  <div style="margin-left: 120px;">
			  <a href="JavaScript:void(0);" @click="getComplainTalk()" class="ncap-btn">刷新对话</a>
			  <a href="JavaScript:void(0);" @click="addTalk()" class="ncap-btn">发布对话</a>
		  </div>
		</dl>
      </div>
	  <div class="ncap-form-default" v-if="isClose && state > 1 && state != 4">
	    <div class="title">
	      <h3>投诉处理</h3>
	    </div>
		<div class="bot" style="margin:15px 0px 0px 12px;">
		  <a @click="isClose = false" href="JavaScript:void(0);" class="ncap-btn-big ncap-btn-green">关闭投诉</a>
	      <a style="margin-left: 15px;" href="javascript:history.back(-1)" class="ncap-btn-big ncap-btn-green">返回</a>
	    </div>
	  </div>
	  <div class="ncap-form-default" v-if="!isClose">
	    <div class="title">
	      <h3>投诉处理</h3>
	    </div>
			<dt class="tit">处理意见：</dt>
			<dd class="opt">
			  <textarea v-model="complain.final_handle_msg" class="w400"></textarea>
			</dd><br>
	  		<div style="margin:15px 0px 0px 120px;">
	  		  <a @click="onSubmit" href="JavaScript:void(0);" class="ncap-btn-big ncap-btn-green">确认提交</a>
	  		  <a style="margin-left: 15px;" href="javascript:history.back(-1)" class="ncap-btn-big ncap-btn-green">取消</a>
	  		</div>
	  </div>
      <div class="ncap-form-default" v-if="state == 4">
        <div class="title">
          <h3>处理详情</h3>
        </div>
        <dl class="row">
          <dt class="tit">处理意见：</dt>
          <dd class="opt">{{complain.final_handle_msg}}</dd>
        </dl>
        <dl>
          <dt class="tit">处理时间：</dt>
          <dd class="opt">{{complain.final_handle_time_show}}</dd>
        </dl>
        <div class="bot">
          <a href="javascript:history.back(-1)" class="ncap-btn-big ncap-btn-green">返回</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
	getBaseInfo
} from "@/utils/api";
export default {
  data() {
    return {
      currentPage: this.$route.params.currentPage || 1,
      order_id: this.$route.params.order_id,
      complain_id: this.$route.params.complainId,
      complain: {
		  order_goods: {}
	  },
      complainTalkList: [],
	  complainTalk:{},
      order: {},
      express: {},
      actionLog: null,
	  state: 1,
	  admin: {},
	  isClose: true
    };
  },
  components: {},
  created() {
    this.getComplain();
    this.getOrder();
    this.getComplainTalk();
	this.getAdmin();
  },
  methods: {
    getComplain() {
      var that = this;
      this.request
        .get("/order/complain?complain_id=" + this.complain_id)
        .then(function(res) {
          that.complain = res;
		  that.state = res.complain_state;
        });
    },
    getOrder() {
      var that = this;
      this.request.get("/order?order_id=" + this.order_id).then(function(res) {
        that.order = res;
      });
    },
    getComplainTalk() {
      var that = this;
      this.request
        .get("/order/complain_talk/list?complain_id=" + this.complain_id)
        .then(function(res) {
          that.complainTalkList = res;
        });
    },
    talkState(talk) {
      var that = this;
      this.request.put("/order/complain_talk", talk).then(function(res) {
        if (res.status == 1) {
          that.$message.success("屏蔽成功");
          that.getComplainTalk();
        } else {
          that.$message.error("屏蔽失败");
        }
      });
    },
	addTalk() {
	  var that = this;
	  this.complainTalk.complain_id = this.complain_id;
	  this.complainTalk.talk_member_id = this.admin.admin_id;
	  this.complainTalk.talk_member_name = this.admin.user_name;
	  this.complainTalk.talk_member_type = "admin";
	  this.complainTalk.talk_time = new Date().getTime() / 1000;
	  this.complainTalk.talk_state = 1;
	  this.request
	    .post("/order/complain_talk", that.complainTalk)
	    .then(function(res) {
	      if (res.status == 1) {
	        that.$message.success("发布成功!");
	        that.getComplainTalk();
	      } else {
	        that.$message.error("发布失败,错误原因:" + res.msg);
	      }
	    });
	},
	onSubmit() {
	  var that = this;
	  this.complain.complain_state = 4;
	  this.complain.final_handle_time = new Date().getTime() / 1000;
	  this.request.put("/order/complain", that.complain).then(function(res) {
	    if (res.status == 1) {
	      that.$message.success("关闭成功!");
	      that.$router.push({
	        name: "complains"
	      });
	    } else {
	      that.$message.error("关闭失败,错误原因:" + res.msg);
	    }
	  });
	},
	getAdmin() {
		var that = this;
		getBaseInfo().then(function(res) {
			that.admin = res;
		})
	}
  }
};
</script>

<style scoped>
.ncap-order-style .ncap-order-details {
  margin: 20px auto;
}
.ncap-form-default dd.opt {
    text-align: left;
    width: 70%;
    margin-top: 15px;
}
.ncap-form-default dt.tit {
    text-align: right;
    min-width: 100px;
    padding-right: 2%;
    margin-top: 15px;
}
</style>
